import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { Form, Icon, Input, Button } from 'antd'
import { loginStatus } from '../../actions/user'
import $ from 'jquery'
import './inex.less'
const mapState = state => {
  return {
    isloading: state.user.isloading,
    haslogin: state.user.haslogin,
    roleId: state.user.role_id,
    message: state.user.message
  }
}

@connect(
  mapState,
  { loginStatus }
)
@Form.create()
export default class Login extends Component {
  //登录按钮
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let params = { userName: values.userName, password: values.password }
        this.props.loginStatus(params)
      }
    })
  }
  //到注册页面
  toRegisterPage = () => {
    this.props.history.push('/register')
  }
  componentDidUpdate() {
    //更具错误信息提示
    if (this.props.message) {
      if (this.props.message === '用户名错误') {
        $('#userName').addClass('message')
        $('.username-no').slideDown()
      } else if (this.props.message === '密码错误') {
        $('#password').addClass('message')
        $('.password-no').slideDown()
      }
      if (this.props.message === '用户名错误') {
        $('#userName').addClass('message')
        $('.username-no').slideDown()
      } else if (this.props.message === '密码错误') {
        $('.username-no').attr({ style: 'display:none' })
        $('#userName').removeClass('message')
        $('#password').addClass('message')
        $('.password-no').slideDown()
      }
    }
    //输入框为空时,隐藏信息错误提示
    if ($('#userName')[0]) {
      if ($('#userName')[0].value) {
      } else {
        $('.username-no').attr({ style: 'display:none' })
      }
      if ($('#password')[0].value) {
      } else {
        $('.password-no').attr({ style: 'display:none' })
      }
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form
    //已登录到对应角色页面,否则到登录页
    return this.props.haslogin ? (
      <Redirect to="/admin/dashboard" />
    ) : (
      <div className="login-bg">
        <Form onSubmit={this.handleSubmit} className="login-form">
          <div className="login-header">欢迎使用易书换书平台</div>
          <Form.Item>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: '请输入用户名!' }]
            })(
              <Input
                className="login-input"
                prefix={
                  <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                placeholder="用户名"
              />
            )}
            <p className="fail-message-none username-no">该用户不存在</p>
          </Form.Item>

          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码!' }]
            })(
              <Input
                className="login-input"
                prefix={
                  <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                type="password"
                placeholder="密码"
              />
            )}
            <p className="fail-message-none password-no">密码错误</p>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="form-button"
              onClick={this.loginHandle}
            >
              登录
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              className="form-button"
              onClick={this.toRegisterPage}
            >
              注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
